<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>配合border-image实现圆角渐变边框</title>
  <!--  <link rel="stylesheet" href="./styles/index.css" />-->
</head>
<style>
  body,
  html {
    width: 100%;
    min-height: 100%;
    display: flex;
  }

  .border-image-clip-path {
    width: 200px;
    height: 100px;
    margin: auto;
    border: 10px solid;
    border-image: linear-gradient(45deg, gold, deeppink) 1;
    clip-path: inset(0px round 10px);
    /*animation: huerotate 6s infinite linear;*/
    filter: hue-rotate(360deg);
  }

  @keyframes huerotate {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rorate(360deg);
    }
  }
</style>
<body>
<div class="border-image-clip-path"></div>
</body>
</html>
